<template>
	<view class="page">
		<view class="search-block">
			<view class="search-ico-wapper">
				<image src="../../static/icos/search.png" class="search-ico"></image>
			</view>
			<input type="text" placeholder="搜索预告" maxlength="10" class="search-text" confirm-type="search" @confirm="searchMe" />
		</view>
		<view class="movie-list page-block">
			<view class="movie-wapper" v-for="trailer in trailerList">
				<image :src="trailer.cover" :data-trailerId="trailer.id" @click="showTrailer" class="poster"></image>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trailerList: [],
				keywords:'',  //搜索得关键字
				page:1,  //当前第几页
				totalPages:1  //总页数
			}
		},
		onLoad() {
			uni.showLoading({
				mask: true,
				title: '请稍后...'
			})

			var serverUrl = this.serverUrl
			//查询猜你喜欢数据列表
			uni.request({
				url: serverUrl + '/search/list?keywords&qq=951473136&page=&pageSize=',
				method: "POST",
				success: (res) => {
					if (res.data.status == 200) {
						// debugger
						var trailerList = res.data.data.rows
						this.trailerList = trailerList
					}
				},
				complete: () => {
					uni.hideLoading()
					
				},
			})
		},
		onReachBottom() {
			var me = this
			//查询下一页面，当前页数累加1
			var page = me.page+1
			//获得当前页面中data里面得搜索值
			var keywords = me.keywords
			//获取总页数
			var totalPages = me.totalPages
			//如果当前需要分页得分页数和总页数相等就不分页
			if(page>totalPages){
				return
			}
			me.pagedTrailerList(keywords,page,15)
			
		},
		methods: {
			showTrailer(e){
				var trailerId = e.currentTarget.dataset.trailerid
				//页面跳转接口api
				uni.navigateTo({
					url: "../movie/movie?trailerId="+trailerId
				})
			},
			pagedTrailerList(keywords,page,pageSize){
				uni.showLoading({
					mask: true,
					title: '请稍后...'
				})
				
				var serverUrl = this.serverUrl
				//查询猜你喜欢数据列表
				uni.request({
					url: serverUrl + '/search/list?keywords='+keywords+'&qq=951473136&page='+page+'&pageSize='+pageSize,
					method: "POST",
					success: (res) => {
						if (res.data.status == 200) {
							// debugger
							var tempList = res.data.data.rows
							this.trailerList = this.trailerList.concat(tempList)
							this.totalPages = res.data.data.total //获取总页数
							this.page = page  //覆盖当前页面里的page
						}
					},
					complete: () => {
						uni.hideLoading()
						
					},
				})
			},
			searchMe(e){
				var me = this
				//获取搜索得内容
				var value = e.detail.value
				me.keywords = value
				me.trailerList = []
				me.pagedTrailerList(value,1,15)
				
			}
		}
	}
</script>

<style scoped>
	/* 搜索框 start */
	.search-ico {
		width: 40upx;
		height: 40upx;

	}

	.search-text {
		font-size: 14px;
		background-color: #eaeaea;
		height: 60upx;
		width: 650px;
	}

	.search-block {
		display: flex;
		flex-direction: row;
		padding: 0upx 20upx 20upx 20upx;
		/* 固定搜索栏 */
		position: fixed;
		top: 100;
		z-index: 2000;
		background-color: #F8F8F8;
	}

	.search-ico-wapper {
		background-color: #EAEAEA;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0upx 10upx;
	}

	/* 搜索框 end */

	/* 预告片列表 start */

	.poster {
		width: 200upx;
		height: 270upx;
	}

	.movie-list {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;

		padding: 100upx 10upx 0upx 10upx;
	}

	.movie-wapper {
		padding: 10upx 20upx;
	}

	/* 预告片列表 end */
</style>
